<template>
	<view class="page container flex flex-column">
		<view class="box">
			<uni-forms :modelValue="form" ref="form" label-position="top" err-show-type="undertext" label-width="300" :border="true" v-if="status!='look'">
				<uni-forms-item label="姓名" name="name">
					<input v-model="form.name" :placeholder="placeHolder.name"/>
				</uni-forms-item>
				<uni-forms-item label="联系方式" name="mobile">
					<input v-model="form.mobile" maxlength="20" :placeholder="placeHolder.mobile" type="text" clearable/>
				</uni-forms-item>
			</uni-forms>
			<uni-forms :modelValue="form" ref="form" label-position="top" err-show-type="undertext" label-width="300" :border="true" v-else>
				<uni-forms-item label="姓名" name="name">
					<input v-model="form.name" disabled maxlength="20" :placeholder="placeHolder.name" type="text" clearable/>
				</uni-forms-item>
				<uni-forms-item label="联系方式" name="mobile">
					<input v-model="form.mobile" disabled maxlength="20" :placeholder="placeHolder.mobile" type="text" clearable/>
				</uni-forms-item>
			</uni-forms>
			<view style="height: 80rpx; width: 100%;"></view>
			<button class="btnHeight40 bac-color-normal w-49" @click="sureBtn" v-if="status!='look'">
				{{status=='add'?'添加':'保存'}}
			</button>
		</view>
	</view>

</template>

<script>
	let placeHolder = {
		name:'请输入志愿者姓名',
		mobile:'请输入志愿者联系方式'
	}
	import {mapGetters,mapActions} from 'vuex'
	// import {myMixins} from '../../common/js/my_mixins_jr_edit.js'
	import uniForms from '@/components/uni-forms/components/uni-forms/uni-forms.vue'
	import uniFormsItem from '@/components/uni-forms/components/uni-forms-item/uni-forms-item.vue'
	export default{
		// mixins:[myMixins],
		components:{
			uniForms,uniFormsItem
		},
		data(){
			return{
				form_name:'archives_help',
				field:'h_help_data',
				status:'',
				index:'',
				defaultValue:{
					'time':'2000-01-01'
				},
				form:{
					name:'',
					mobile:'',
				},
				placeHolder:placeHolder,
				rules: {
					name: {
						rules: [
							{
								required: true,
								errorMessage: placeHolder.name
							}
						]
					},
					mobile: {
						rules: [
							{
								required: true,
								errorMessage: placeHolder.mobile
							}
						]
					}
				}
			}
		},
		onLoad(query) {
			this.status = query.status
			this.index = Number(query.index)
			if(getApp().globalData.editItem){
				this.form = getApp().globalData.editItem
			}
			console.log('this.form',this.form)
		},
		onReady() {
			console.log('onReady')
			this.$refs.form.setRules(this.rules);
		},
		computed:{
			// ...mapGetters(['tyjr_item'])
		},
		methods:{
			sureBtn(){
				this.$refs.form
				.validate()
				.then(res => {
					uni.hideLoading();
					console.log('表单数据信息：', res);
					let params = this.form;
					if (this.status == 'add') {
						this.bus.$emit('formAdd', params);
					} else if(this.status == 'edit'){
						this.bus.$emit('formEdit', { index: this.index, params: params});
					}
					// this.$utils.navigateBack();
					uni.navigateBack({
						delta:1
					})
				})
				.catch(err => {
					uni.hideLoading();
					console.log('表单错误信息：', err);
				});
			},
		}
	}
</script>
